<template>
    <view class="search-bar">
        <div class="search-content p-[24rpx]">
            <input
                type="text"
                :placeholder="props.placeholder"
                class="search-input"
                confirm-type="search"
            />
            <view class="search-btn">
                <img
                    class="search-icon"
                    src="https://cos.aitshirt.cn/app-icon/%E7%BB%84%201739%402x.png"
                />
            </view>
        </div>
    </view>
</template>
<script setup lang="ts">
const props = defineProps({
    placeholder: {
        type: String,
        default: '请输入设计师',
    },
});
</script>
<style scoped lang="scss">
.search-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 88rpx;
    background: #ffffff;
    box-shadow: 0rpx 1rpx 0rpx 2rpx #e7e7e7;
    padding: 8rpx 0 !important;
    box-sizing: content-box;
    .search-content {
        width: calc(100% - 48rpx);
        height: 72rpx;
        display: flex;
        align-items: center;
        background: #f3f7f8;
        border-radius: 8rpx;
        box-sizing: border-box;
        padding: 0 16px;
        .search-input {
            flex: 1;
            height: 38rpx;
            font-weight: 400;
            font-size: 28rpx;
            color: #666666;
            line-height: 38rpx;
        }

        .search-btn {
            .search-icon {
                width: 32rpx;
                height: 32rpx;
            }
        }
    }
}
</style>
